import _ from 'lodash';
import './App.css';
import home from './views/home.html';

// 组件
function component() {
  const element = document.createElement('div');
  const btn = document.createElement('button');

  // lodash 在当前 script 中使用 import 引入
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');
  element.classList.add('hello');

  
  btn.innerHTML = 'Click me and check the console!';
  btn.onclick = 'printMe';  

  element.appendChild(btn);

  return element;
}

// 获得组件
async function getComponent() {
  // 升级后
  const element = document.createElement('div');
  const { default: _lodash } = await import('lodash');
  element.innerHTML = _lodash.join(['Hello', 'webpack'], ' ');
  element.classList.add('hello');

  const btn = document.createElement('button');
  btn.innerHTML = 'Click me and check the console!';
  btn.onclick = 'printMe';  

  element.appendChild(btn);

  // html
  const html =  home;

  // 异步 ReferenceError: setImmediate is not defined
  setTimeout(() => {
    const btn = document.getElementById('btn');
    const label = document.getElementById('label');
    btn.addEventListener('input', (event) => {
      label.textContent = event.target.value;
    }, false);
  }, 0);


  const elements = document.createElement('div');
  elements.id = 'root';
  elements.innerHTML = _lodash.join([html], '');
  return elements;

  // 升级前
  return import('lodash')
    .then(({ default: _ }) => {
      const element = document.createElement('div');
      element.innerHTML = _.join(['Hello', 'webpack'], ' ');
      element.classList.add('hello');
     return element;
    })
    .catch((error) => 'An error occurred while loading the component');
}

// 原生
// getComponent().then((component) => {
//   document.body.appendChild(component);
// });
console.error(process.env.NODE_ENV)


// 集成react
// 参考：参考：https://blog.csdn.net/qq_37860930/article/details/102969131
import React from 'react'               // React 的核心库
import ReactDOM from 'react-dom'        // 提供与 DOM 相关的功能
import App from './App'

ReactDOM.render(
  <App />, 
  document.getElementById('root'));
